<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!--
      
      Vue3中，给组件传递的事件，如果组件内没有通过 emits 选项做配置的话，那么这个事件也会收集到组件内的 attrs 身上，并且事件名称会修改 onXXX

      Vue中，事件处理函数，如果没有加括号，那么会自动传递给这个事件处理函数一个 $event 数据下去
        1. 如果事件是一个原生事件：$event 是事件对象
        2. 如果事件是一个自定义事件：$event 是触发这个事件时，传递过来的参数


      下面代码中，有个小问题是 onChange 触发了两次的问题：怎么解决
        1. .stop 阻止冒泡
        2. 禁用 attrs 继承
        3. 组件内 通过 emits 选项提前定义 

      Vue2 中 组件上使用 v-model 的时候，展开写法如下
        v-model="isChecked"  

        :value="isChecked"
        @input="isChecked = $event"

      Vue3中 组件上使用 v-model 的时候，展开写法如下
        v-model="isChecked"  

        :modelValue="isChecked"
        @update:modelValue="isChecked = $event"

     -->
    <div id="app">
      <!-- <base-checkbox
        label="勾选"
        :checked="isChecked"
        title="hello"
        @change="onChange"
      ></base-checkbox> -->

      <base-checkbox label="勾选" v-model="isChecked"></base-checkbox>
    </div>

    <script src="./lib/vue.global.js"></script>
    <script>
      const { ref } = Vue;

      const app = Vue.createApp({
        setup() {
          const isChecked = ref(true);

          function onChange(event) {
            console.log("onChange", event);
            // 修改自己的 isChecked 数据
            isChecked.value = event;
          }

          return {
            isChecked,
            onChange,
          };
        },
      });

      app.component("base-checkbox", {
        // 2. 禁用 attrs 继承
        // inheritAttrs: false,

        template: `
          <div class="base-checkbox">
            <input type="checkbox" :checked="modelValue" @change="fn1" /> 
            <span>{{ label }}</span>
          </div>
        `,

        // 组件接收到的prop数据
        props: ["label", "modelValue"],
        // 组件接收到的自定义事件的名字，在这里声明了的，就不会被 attrs 所拿到
        emits: ["change", "update:modelValue"],

        setup(props, { attrs, emit }) {
          console.log(attrs);

          function fn1(event) {
            console.log("fn1", event.target.checked);

            // 触发一个自定义事件，事件名，就叫做 change
            emit("update:modelValue", event.target.checked);
          }

          return {
            fn1,
          };
        },
      });

      app.mount("#app");
    </script>
  </body>
</html>
